<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>大家都在看</title>
	<#include "../common/header.ftl" >
    <script src="/static/jquery/jquery-form/jquery.form.js"></script>
    <script src="/static/jquery/jquery-bootstrap/jquery.bootstrap.min.js"></script>

    <style>
        .modal-body img {
            width: 100%;
        }
    </style>


    <script>
        $(function () {


            //查看文章
            $('.btn-read').click(function () {
                var id = $(this).data('id');
                $.get('/everybodys/read.do', {id: id}, function (data) {
                    $('.content').html(data.content);
                });
                $('#travelModal').modal('show');
            })
        })
    </script>
</head>
<body>
<div class="container " style="margin-top: 20px">
	<#include "../common/top.ftl" >
    <div class="row">
        <div class="col-sm-3">
            <!--设置用于菜单回显-->
                <#assign currentMenu="everybodys">
			<#include "../common/menu.ftl" >
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">大家都在看</h1>
                </div>
            </div>
            <!--高级查询--->
            <form class="form-inline" id="searchForm" action="/everybodys/list.do" method="post">
                <div class="form-group">
                    <input id="currentPage" type="hidden" name="currentPage" value="${(qo.currentPage)!}">
                    <label for="keyword">攻略搜索:</label>
                    <input type="text" class="form-control" id="keyword" name="keyword" value="${(qo.keyword)!}"
                           placeholder="请输入攻略/地点">
                </div>

                <input type="submit" id="btn_query" class="btn btn-success" value="查询">
            </form>

            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>封面</th>
                    <th>攻略标题</th>
                    <th>副标题</th>

                </tr>
                </thead>
				<#list  pageInfo.list as strategy>
					<tr>
                        <td>
                            <img src='${(strategy.coverUrl)!}' width="100px">
                        </td>
                        <td>${(strategy.title)!}</td>
                        <td>${(strategy.subTitle)!}</td>
                        <td>
                            <button class="btn btn-info btn-xs btn-read" data-id='${(strategy.id)!}'>
                                查看文章
                            </button>
                        </td>
                    </tr>
                </#list>
            </table>


			<#include "../common/page.ftl" >
        </div>
    </div>
</div>


<div id="travelModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">查看内容</h4>
            </div>
            <div class="modal-body content">
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="btn" data-dismiss="modal" aria-hidden="true">关闭</a>
            </div>
        </div>
    </div>
</div>


</body>
</html>